 <!DOCTYPE html>

<html>
    <head>
        <title>Kickoff! 3D</title>
        <link rel="stylesheet" type="text/css" href="http://www.x3dom.org/x3dom/release/x3dom.css" />
        <script type="text/javascript" src="http://www.x3dom.org/x3dom/release/x3dom.js"></script>
		<script src="javascript.js"></script>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>

		counter = 0;
		life = 3; 

		//Animation für Powerbalken
		
		 function animiere() 
		{
            var powerbar = document.getElementById("animation");
            var laenge = parseInt(powerbar.style.width);

            if ( laenge < 100)
            {
				laenge= laenge + 5;
				powerbar.style.width = laenge + "%";
			}
        }

        //Funktion zum erneuten Spielen
		
		function playAgain(){
			document.getElementById("gameover").style.display="none";
			document.getElementById("inhalt").innerHTML="";
		}
		
		//Funktion zum Spielabbruch

		function thxPlay(){
			document.getElementById("inhalt").innerHTML="";
			document.getElementById("inhalt").innerHTML="Ok, bis bald";
			document.getElementById("button1").style.display="none";
			document.getElementById("button2").style.display="none";
		}

		//Darstellung der verbleibenden Leben
     
		function showLife()
		{
				document.getElementById("life").innerHTML=life;
				window.requestAnimationFrame(showLife);
		}

		//Darstellung der erzielten Tore

		function showGoals()
		{
				document.getElementById("counter").innerHTML=counter;
				window.requestAnimationFrame(showGoals);
		}

		// Popup-Fenster nach verlorener Partie
		
		function popup(){
			document.getElementById("gameover").style.display="block";
				if(counter==1){
					document.getElementById("inhalt").innerHTML+="Sie haben "+counter+" Tor geschossen!</br>";
				}
				else
				{
					document.getElementById("inhalt").innerHTML+="Sie haben "+counter+" Tore geschossen!</br>";
				}
			document.getElementById("inhalt").innerHTML+="</br>"
			document.getElementById("inhalt").innerHTML+="M&ouml;chten Sie es nochmal probieren?</br>";
		}

		//Setzt den Wert des Powerbalkens auf 1
		
		function barReset()
        {
        	document.getElementById("animation").setAttribute('style', 'width: 1%');
        }

        //Setzt den Ball an seinen Ausgangspunkt zurück

		function ballReset(){
			document.getElementById("ball").setAttribute("translation", "7.4 -1.2 -136");
		}

		//Sound Funktionen Anfang
		
        function playAudio()
        {
            document.getElementById('ballKick').setAttribute('enabled','true');
        }

           function playBoo()
        {
        	 document.getElementById('boo').setAttribute('enabled','true');
        }

        function playClapping()
        {
        	document.getElementById('clap').setAttribute('enabled','true');
        }

        function playCatch()
        {
        	document.getElementById('catch').setAttribute('enabled','true');
        }

         function playWhistle()
        {
        	document.getElementById('whistle').setAttribute('enabled','true');
        }

        // Ende Sound Funktionen

        // Funktion zum Ein/-Ausschalten des Hintergrundsounds
		
		isPressed = true;
		function muteSound(){
			
			if(isPressed){
				document.getElementById('stadium').setAttribute('enabled','false');
				isPressed=false;
			}
			else
			{
				document.getElementById('stadium').setAttribute('enabled','true');
				isPressed=true;
			}
		}
		
		tor = new x3dom.fields.SFVec3f(0.5, 0, 0);
		
		//Methode beeinhaltet alle Initialwerte 

		function init(){
				t = 0.08;
				s = new x3dom.fields.SFVec3f(7.4, -1.2, -136);
				a = new x3dom.fields.SFVec3f(0, -10, 0);
				v = new x3dom.fields.SFVec3f(-10, 10, 0);
				r = new x3dom.fields.SFVec3f(0, 0, 0);
				l = new x3dom.fields.SFVec3f(0, 0, 0);
				g = new x3dom.fields.SFVec3f(0, 0, 0);
				reset = new x3dom.fields.SFVec3f(0, 0, 0);
				rPower = new x3dom.fields.SFVec3f(1 ,1.3,-4);
				lPower = new x3dom.fields.SFVec3f(-1, 1.3,-4);
				gPower = new x3dom.fields.SFVec3f(0, 1.3, -4);
				keeperAni = new x3dom.fields.SFVec3f(-8.5 , 5, -180);	//Startpunkt vom Keeper 
				changeDir = true;
				j=0;
				i=0;
			}

			// Torwart Animation
			
			function keeperAnimation()
		   {
				if (j<52 && changeDir==true)		//52 Weite, die er sich im Tor bewegt
				{
					j++;
					keeperAni = keeperAni.add(tor);		//Addiere Vector Tor auf KeeperAni
				    document.getElementById('keeper').setAttribute('translation', keeperAni.toString()); //Holt das Objekt mit der ID Keeper, setzt das Attribut auf die Werte von "'translation' -> keeperAni.toString()" holt die Werte von dem Vector keeperAni und schreibt sie in einen String
					document.getElementById('keeperText').setAttribute('translation', document.getElementById('keeper').getAttribute('translation'));
					window.requestAnimationFrame(keeperAnimation);
			    }
				else if(j==52)
				{	
					changeDir=false;
					keeperAni = keeperAni.subtract(tor);
					document.getElementById('keeper').setAttribute('translation', keeperAni.toString());
					document.getElementById('keeperText').setAttribute('translation', document.getElementById('keeper').getAttribute('translation'));
					window.requestAnimationFrame(keeperAnimation);
					j--;
				}
				else if(changeDir==false)
				{
					keeperAni = keeperAni.subtract(tor);
					document.getElementById('keeper').setAttribute('translation', keeperAni.toString());
					document.getElementById('keeperText').setAttribute('translation', document.getElementById('keeper').getAttribute('translation'));
					window.requestAnimationFrame(keeperAnimation);
					j--;
				}
				if(j==0)
					{
						changeDir=true;
					}
		    }
			
		//Schussstärke Rechts berechnen/ Interval setzen

			mouseRight = -1; 
			function mousedownRight() {
			  if(mouseRight==-1) 
				 mouseRight = setInterval(kickPowerRechts, 50);
			}
			function mouseupRight() {
			   if(mouseRight!=-1) {  
				 clearInterval(mouseRight);
				 mouseRight=-1;
			   }
			}
			function kickPowerRechts() {
				r = r.add(rPower);
				animiere();
			}
		//ende
			
		//Schussstärke Links berechnen/Interval setzen

			mouseLeft = -1;  
			function mousedownLeft() {
			  if(mouseLeft==-1)  
				 mouseLeft = setInterval(kickPowerLinks, 50 );
			}
			function mouseupLeft() {
			   if(mouseLeft!=-1) { 
				 clearInterval(mouseLeft);
				 mouseLeft=-1;
			   }
			}		
			function kickPowerLinks()
				{
					l = l.add(lPower);
					animiere();
				}
		// ende
			
		// Schussstärke Gerade berechnen/Interval setzen

			mouseStraight = -1; 
			function mousedownStraight() {
			  if(mouseStraight==-1) 
				 mouseStraight = setInterval(kickPowerGerade, 50 );
			}
			function mouseupStraight() {
			   if(mouseStraight!=-1) { 
				 clearInterval(mouseStraight);
				 mouseStraight=-1;
			   }
			}	
		function kickPowerGerade()
			{
				g = g.add(gPower);
				animiere();
			}
		// ende

		//Entfernt die Onmousedown sowie die Onmouseup Methode um einen "Dauerschuss" zu verhindern
		function removeMousedown(){
			document.getElementById('kickRightShape').removeAttribute('onmousedown');
			document.getElementById('kickLeftShape').removeAttribute('onmousedown');
			document.getElementById('kickStraightShape').removeAttribute('onmousedown');
			document.getElementById('kickRightShape').removeAttribute('onmouseup');
			document.getElementById('kickLeftShape').removeAttribute('onmouseup');
			document.getElementById('kickStraightShape').removeAttribute('onmouseup');
		}

		//Fügt die durch removeMousedown() entfernten Events wieder hinzu
		
		function addMouseDown(){
			document.getElementById('kickRightShape').setAttribute('onmousedown', 'mousedownRight(), kickPowerRechts()');
			document.getElementById('kickLeftShape').setAttribute('onmousedown', 'mousedownLeft(), kickPowerLinks()');
			document.getElementById('kickStraightShape').setAttribute('onmousedown','mousedownStraight(), kickPowerGerade()');
			document.getElementById('kickRightShape').setAttribute('onmouseup', 'mouseupRight(), playAudio(), kickRechts()');
			document.getElementById('kickLeftShape').setAttribute('onmouseup', 'mouseupLeft(), playAudio(), kickLinks()');
			document.getElementById('kickStraightShape').setAttribute('onmouseup','mouseupStraight(), playAudio(), kickGerade()');
		}

		// Funktion zur Kollisionsabfrage
		
		function collisionObj(s){
			document.getElementById('ball').setAttribute('translation', s.toString());
			var ballVolume = ball._x3domNode.getVolume();
			var wandVolume = wand._x3domNode.getVolume();	
			var keeperVolume = keeper._x3domNode.getVolume();
			var fieldVolume = field._x3domNode.getVolume();
			var overVolume = over._x3domNode.getVolume();
				if(	(ballVolume.center.x < wandVolume.max.x && ballVolume.center.x > wandVolume.min.x) &&
					(ballVolume.center.y < wandVolume.max.y && ballVolume.center.y > wandVolume.min.y) &&
					(ballVolume.center.z < wandVolume.max.z && ballVolume.center.z > wandVolume.min.z) ) 
					{
						playClapping();
						counter++;
						barReset();
						setTimeout(ballReset,1500);
						setTimeout(playWhistle,2000);
						i=31;
						
						
					}else if((ballVolume.center.x < keeperVolume.max.x && ballVolume.center.x > keeperVolume.min.x) &&
					(ballVolume.center.y < keeperVolume.max.y && ballVolume.center.y > keeperVolume.min.y) &&
					(ballVolume.center.z < keeperVolume.max.z && ballVolume.center.z > keeperVolume.min.z))
					{
						playCatch();
						playBoo();
						life--;
						barReset();
						setTimeout(ballReset,500);
						setTimeout(playWhistle,1000);
						i = 31;
						if(life==0)
						{
							life=3;
							popup();
							counter=0;
							tor = new x3dom.fields.SFVec3f(0.5, 0, 0);
							
						}
					}else if((ballVolume.center.x < fieldVolume.max.x && ballVolume.center.x > fieldVolume.min.x) &&
					(ballVolume.center.y < fieldVolume.max.y && ballVolume.center.y > fieldVolume.min.y) &&
					(ballVolume.center.z < fieldVolume.max.z && ballVolume.center.z > fieldVolume.min.z))
					{
						playBoo();
						life--;
						barReset();
						setTimeout(ballReset,1500);
						setTimeout(playWhistle,2000);
						i = 31;
						if(life==0)
						{
							life=3;
							popup();
							counter=0;
							tor = new x3dom.fields.SFVec3f(0.5, 0, 0);
							
						}
					}else if((ballVolume.center.x < overVolume.max.x && ballVolume.center.x > overVolume.min.x) &&
					(ballVolume.center.y < overVolume.max.y && ballVolume.center.y > overVolume.min.y) &&
					(ballVolume.center.z < overVolume.max.z && ballVolume.center.z > overVolume.min.z))
					{
						playBoo();
						life--;
						barReset();
						setTimeout(ballReset,1500);
						setTimeout(playWhistle,2000);
						i = 31;
						if(life==0)
						{
							life=3;
							popup();
							counter=0;
							tor = new x3dom.fields.SFVec3f(0.5, 0, 0);
							
						}
					}
		}

		//Funktion zur Animation des Schusses nach Rechts
		
		function kickRechts()
		{
			if( i < 30)
			{
				removeMousedown()
				i++;
				r = r.addScaled(a, t);
				s = s.addScaled(r, t);
				collisionObj(s);
				window.requestAnimationFrame(kickRechts);
			}
			else
			{
				init();
				setTimeout(addMouseDown,2000);
			}
		}

		//Funktion zur Animation des Schusses nach Links

		function kickLinks()
		{
			if( i < 30 )
			{
				removeMousedown()
				i++;
				l = l.addScaled(a, t);
				s = s.addScaled(l, t);
				collisionObj(s);
				window.requestAnimationFrame(kickLinks);
			}
			else
			{
				init();
				setTimeout(addMouseDown,2000);
			}
		}

		//Funktion zur Animation des Schusses in die Mitte

		function kickGerade()
		{
			if( i < 30 )
			{
				removeMousedown()
				i++;
				g = g.addScaled(a, t);
				s = s.addScaled(g, t);
				collisionObj(s);
				window.requestAnimationFrame(kickGerade);
				
			}
			else
			{
				init();
				setTimeout(addMouseDown,2000);
			}
		}
        </script>
    </head>
    <body onload="showGoals(),showLife(), init(), keeperAnimation()">
	
		<div id="ansicht">
			<x3d width="1366" height="768" style="position: relative; width:100%; height:100%; border:0; margin:0; padding:0;">

				<scene>
					<navigationInfo type='"none", "any"' headlight="true" ></navigationInfo>
					<background  skyColor="0 0 0"></background>
					
					
					
					
					<Viewpoint 
						position="4.37706 2.85158 -108.80202" 
						orientation="0.54565 -0.83796 0.00913 0.04798" 
						zNear="0.03984" zFar="398.39651" 
						description="defaultX3DViewpointNode">
					</Viewpoint>



					<directionalLight id="directional" direction='500 -350 -40' on ="TRUE" intensity='0.7' shadowIntensity= '0.9' color= '1 1 1'>
        			</directionalLight>
					
						
					<!-- Fussballfeld -->
						<transform scale="1 1 1">
							<transform translation="4.5 -2 -160">
							  <transform rotation= "1 0 0 0.07">
								<shape>                           
									<appearance>
										<ImageTexture url="texture/compra-6-1030x1030.jpg"></ImageTexture>
									</appearance>                                                            
									<box size="100 0.5 70"></box>                   
								</shape>
							</transform>
							</transform>
						</transform>
						<transform id="field" scale="1 1 1">
							<transform translation="4.5 -2.5 -160">
								<transform rotation= "1 0 0 0.07">
									<shape id="field">                           
										<appearance>
											<Material transparency='1.0' emissiveColor='0 1 0'></Material>
										</appearance>                                                            
										<box size="100 0.5 70"></box>                   
									</shape>
								</transform>
							</transform>
						</transform>

						<transform scale="1 1 1">
							<transform translation="4.5 -1.4 -200">
								<transform rotation= "1 0 0 0.000001">
									<shape>                           
										<appearance>
											<Material transparency='1.0' emissiveColor='0 1 0'></Material>
										</appearance>                                                            
										<box size="100 0.5 200"></box>                   
									</shape>
							</transform>
						</transform>

						<!-- Torwand -->
						
						<transform translation= "4.5 8 -190">
							<transform rotation="0 1 0 1.58">
								<transform scale='70 70 90  '>
									<inline url="models/tor.x3d"> </inline>
								 </transform>
							</transform>
						</transform>
						
						<transform id="wand" translation="4.5 8 -210">
							<transform scale = "1 1 1">
								<Shape>
									<box size="40 15 40" ></box>
									<appearance>
										<Material transparency='1.0' emissiveColor='1 0 0'></Material>
									</appearance>
								</Shape>
							</transform>
						</transform>

						<!-- Hintergrund -->

						<transform id="over" translation="4.5 6.5 -250">
							<transform scale = "1 1 1">
								<Shape>
									<box size="150 150 10" ></box>
									<appearance>
										<Material transparency='1.0' emissiveColor='0 0 1'></Material>
									</appearance>
								</Shape>
							</transform>
						</transform>
						
						<!-- Torhueter-->
						
						<transform id="keeper" translation="15.5 4 -190">
							<transform scale = "1 1.5 1">
								<Shape>
									<box size="10 12 3" ></box>
									<appearance>
										<Material transparency='1.0' emissiveColor='0 0 0'></Material>
									</appearance>
								</Shape>
							</transform>
						</transform>

						<transform id="keeperText" translation="-8.5 5 -180">
								<transform scale = "1 1 1">
									<Shape>
										<plane size="12 15"></plane>
										<appearance>
											<ImageTexture url="texture/torwart.png"></ImageTexture>
										</appearance>
									</Shape>
								</transform>
						</transform>

						<!-- Ball -->
					
						<transform id="ball" translation="7.4 -1.2 -136">
							<transform scale = "1.8 1.8 1.8">
								<inline url="modelball/ball.x3d"></inline>
							</transform>
						</transform>

						<!-- Pfeil Rechts -->

						<transform id="kickButtonRechts" translation="8.3 -0.9 -123">
							<transform rotation="0 0 1 -1.57">
								<transform rotation="0 1 0 -1.2">
									<transform scale = "2 3">
										<Shape id="kickRightShape" onmousedown="mousedownRight(), kickPowerRechts()" onmouseup="mouseupRight(), playAudio(), kickRechts()">
											<plane size="0.7 1.5" ></plane>
											<appearance>
												<Material transparency='1.0' emissiveColor='0 0 0'></Material>
											</appearance>
										</Shape>
									</transform>
								</transform>
							</transform>
						</transform>

						<transform id="kickRechts" translation="9 -1 -123">
							<transform rotation="0 0 1 -1.57">
								<transform rotation="0 1 0 -1.2">
									<transform scale = "2 3">
										<Shape>
											<plane size="1.5 2" ></plane>
											<appearance>
												<ImageTexture url="texture/pfeil.png"></ImageTexture>
											</appearance>
										</Shape>
									</transform>
								</transform>
							</transform>
						</transform>

						<!-- Pfeil Links-->

						<transform id="kickButtonLinks" translation="0.8 -0.9 -123">
								<transform rotation="0 0 1 1.57">
									<transform rotation="0 1 0 1.2">
										<transform scale = "2 3">
											<Shape id="kickLeftShape" onmousedown="mousedownLeft(), kickPowerLinks()" onmouseup="mouseupLeft(),playAudio(), kickLinks()">
												<plane size="0.7 1.5" ></plane>
												<appearance>
													<Material transparency='1.0' emissiveColor='0 0 0'></Material>
												</appearance>
											</Shape>
									</transform>
								</transform>
							</transform>
						</transform>

						<transform id="kickLinks" translation="0.2 -1 -123">
								<transform rotation="0 0 1 1.57">
									<transform rotation="0 1 0 1.2">
										<transform scale = "2 3">
											<Shape>
												<plane size="1.5 2" ></plane>
												<appearance>
													<ImageTexture url="texture/pfeil.png"></ImageTexture>
												</appearance>
											</Shape>
									</transform>
								</transform>
							</transform>
						</transform>

						<!-- Pfeil Gerade -->

						<transform id="kickButtonGerade" translation="4.5 -0.2 -122">
							<transform rotation="1 0 0 -1.5">
								<transform scale = "2 3">
									<Shape id="kickStraightShape" onmousedown="mousedownStraight(), kickPowerGerade()" onmouseup="mouseupStraight(), playAudio(), kickGerade()">
										<plane size="0.7 1.7" ></plane>
										<appearance>
											<Material transparency='1.0' emissiveColor='0 0 0'></Material>
										</appearance>
									</Shape>
								</transform>								
							</transform>
						</transform>


						<transform id="kickGerade" translation="4.5 -0.3 -123">
							<transform rotation="1 0 0 -1.5">
								<transform scale = "2 3">
									<Shape id="kickStraightShape">
										<plane size="1.3 2" ></plane>
										<appearance>
											<ImageTexture url="texture/pfeil.png"></ImageTexture>
										</appearance>
									</Shape>
								</transform>								
							</transform>
						</transform>

				<!-- Sounds -->		

				<Sound>
					<AudioClip id='ballKick' loop='false' enabled="false" url='"sounds/kick.wav"'/>
				
					<AudioClip id='boo' loop='false' enabled="false" url='"sounds/boo.mp3"'/>

					<AudioClip id='stadium' loop='true' enabled="true" url='"sounds/stadium.wav"'/>

					<AudioClip id='whistle' loop='false' enabled="false" url='"sounds/whistle.wav"'/>
				
					<AudioClip id='clap' loop='false' enabled="false" url='"sounds/clapping.wav"'/>
				
					<AudioClip id='catch' loop='false' enabled="false" url='"sounds/catch.wav"'/>
				</Sound>

				</scene>
			</x3d>

			<div id="zaehlertafel">
				<div>GOALS</div>
				<div id="counter"></div>
			</div>
			<div id="leben">
				<div>LIFE</div>
				<div id="life"></div>
			</div>
			<div id="powerbar">
				<p id="animation" style="width: 1%"></p>
			</div>
			<div id="gameover">
				<p>GAME OVER</p>
				<p id="inhalt"></p>
				</br>
				<form id="buttons">
					<input id="button1" type="button" value="nochmal spielen" onClick="playAgain()"></input>
					<input id="button2" type="button" value="nein danke" onclick="thxPlay()"></input>
				</form>
			</div>
			<p id="soundPos"><img id="sound" src="texture/sound.png" onclick="muteSound()"></p>
		</div>
	</body>
</html>
